網頁的開始 於布局排版

現在的年代 也需要RWD適合部分版型

所以我們就由布局開始吧

常常會看到一種網頁布局 左右留白，使得視覺可以集中在中間的重點區塊
![
如此圖兩條紅色線區塊
很多的框架會用Container處理 material-ui 當然有這種寫法

首先取用昨天的範例
Day two end
首先引入

import Container from '@material-ui/core/Container';

其次將 昨天的Button 用Container 包起來

    <Container >
    <Button variant="contained" color="primary">
      你好，世界
    </Button>
    </Container>

當前架構

import React from "react";
import Button from "@material-ui/core/Button";
import Container from '@material-ui/core/Container';

const indexApp = () => {
  return (
   <Container maxWidth='xs'>
    <Button variant="contained" color="primary">
      你好，世界
    </Button>
    </Container>
  );
};

export default indexApp;

其中 餵入的參數maxWidth='xs'為最小，也就是留白流到最大
也可以依照所需給予最大到最小參數排列
'lg'
'md'
'sm'
'xl'
'xs'

這樣就可以達到示意的網站左右留白效果了
Day3